<template>
    <div class="order">
      <jm-head ref="head"></jm-head>
        <div class="order_header box">
            <h1 class="box">我的订单</h1>
            <div class="order_menu">
                <h2>我的订单</h2>
            </div>

        </div>
        <div class="order_content box">
            <div class="order_nav box">
                <div class="order_nav_block" :class = "{order_nav_active: 'all' == status}" @click="navClick('all')">
                    <p>全部</p>

                </div>
                <div class="order_nav_block" :class = "{order_nav_active: 2 == status}" @click="navClick(2)">
                    <p>待付款</p>
                </div>
                <div class="order_nav_block" :class = "{order_nav_active: 3 == status}" @click="navClick(3)">
                    <p>待发货</p>

                </div>
                <div class="order_nav_block" :class = "{order_nav_active: 4 == status}" @click="navClick(4)">
                    <p>待收货</p>

                </div>
            </div>
            <div class="order_nav_content" v-if="active != 0">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  :offset="0"
                  finished-text="没有更多了"
                  @load="getList"
                >

                    <div class="order_list_block box" v-for="(item,index) in list" :key = "index">
                        <div class="block_title box" @click="goDetail(item.id)">{{item.created_at}}<span class="fr">{{item.order_status_cn}}</span></div>
                        <van-cell-group @click="goDetail(item.id)">
                            <van-card
                                v-for = "itemCar of item.order_item"
                                :key = "itemCar.id"
                                :num="itemCar.goods_quantity"
                                :price="itemCar.pay_price / 100 + '.00'"
                                :title="itemCar.good_title"
                                :thumb="itemCar.good_logo"
                            />

                        </van-cell-group>
                        <div class="info_money box" @click="goDetail(item.id)">
                            <p>共{{item.order_item.length}}件商品，总金额 <span>￥{{(item.pay_price - item.jf_price) / 100}}</span></p>
                        </div>
                        <div class="info_btns box" v-if="item.order_status == 2">
                            <button class="fr comm" @click="goDetail(item.id)">去付款</button>
                            <button class="fr quxiao" @click="cancelOrder(item.id)">取消订单</button>
                        </div>

                        <div class="info_btns box" v-else-if="item.order_status == 4">
                            <button class="fr comm" @click="accepter(item.id)">确认收货</button>
                            <button class="fr" @click="see(item.express_type, item.expressArr)">查看物流</button>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
        <van-action-sheet
          v-model="showPayTypeModel"
          :actions="payTypeArr"
          cancel-text="取消"
          :close-on-click-action="true"
          :close-on-popstate="true"
          @select="selectPayType"
          description="选择支付方式"
        />

        <van-action-sheet v-model="showPasKey" title="输入支付密码">
            <div class="content_div box">
                <van-password-input
                :value="passwordVal"
                :focused="showKey"
                @focus="showKey = true"
                />
                <!-- 数字键盘 -->
                <van-number-keyboard
                :show="showKey"
                @input="onInput"
                @delete="onDelete"
                @blur="showKey = true"
                />

            </div>
        </van-action-sheet>

        <van-action-sheet
          v-model="showExpressModel"
          :actions="expressArr"
          cancel-text="取消"
          :close-on-click-action="true"
          :close-on-popstate="true"
          @select="selectExpress"
          description="请选择查看的包裹"
        />
    </div>
</template>

<script>
import Vue from 'vue';
import { List,CellGroup,Card, ActionSheet, PasswordInput, NumberKeyboard  } from 'vant';
import { oederList } from "@/api/order"
import { Toast, Dialog } from 'vant'
import { isSetPay, pay, cancel, accepter } from "@/api/order"
import JmHead from '../head/head'

Vue.use(List).use(CellGroup).use(Card).use(ActionSheet).use(PasswordInput).use(NumberKeyboard)
    export default {
        name: 'order',
        components: {
            JmHead
        },
        data(){
            return {
                status: 2,
                list: [],
                page: 1,
                active: 0,
                loading: false,
                finished: false,

                showPayTypeModel: false,
                payTypeArr: [
                    {name: '余额支付'},
                ],
                showPasKey: false,
                passwordVal: '',
                showKey: true,
                id: 0,
                showExpressModel: false,
                expressArr: [
                ]
            }
        },
        activated(){
            this.passwordVal = ''
            this.status = this.$route.query.status
            if(this.$route.query.status == ''){
                this.status = 'all'
            }
            this.navClick(this.status)
            this.$refs.head.setNavBarUrl()
        },
        methods: {
            goDetail(id) {
                this.$router.push({path: '/order/detail', query: {id}})
            },
            getList() {
                const st = this.status
                oederList({status: st}).then(res => {
                    this.list = this.list.concat(res.data.data)
                    this.page++
                    this.loading = false
                    for(var i=0;i<this.list.length;i++){
                        const expressArr = this.list[i].express_number.split('-')
                        this.list[i].expressArr = expressArr.filter(res => {
                            return res && res.trim();
                        })
                    }
                    if (this.page > res.data.last_page) {
                        this.finished = true
                    }
                })
            },
            goBanck(){
                this.$router.go(-1)

            },
            navClick(act){
                this.list = []
                this.status = act
                this.active = 0
                this.page = 1
                this.finished = false
                const _this = this
                setTimeout(function(){
                  _this.status = act
                  _this.active = 1
                }, 100)
            },
            cancelOrder(id) {
                const that = this
                Dialog.confirm({
                  message: '确认取消订单？',
                }).then(() => {
                    that.cancel(id)
                }).catch(() => {
                })
            },
            cancel(id) {
                cancel({id}).then(res => {
                    if (res.code !== 20000) {
                        Toast.fail({message: res.info, duration: 2000})
                    } else {
                        this.navClick(this.$route.query.status)
                    }
                })
            },
            //立即付款 在订单列表直接支付付款
            selectPay(id) {
                this.showPayTypeModel = true
                this.id = id
            },
            selectPayType(action, index) {
                if (index === 0) {
                    isSetPay({}).then(res => {
                        if(res.data === 1) {
                            this.showPasKey = true;
                        } else {
                            this.$router.push({path: '/password/pay'})
                        }
                    })
                }
            },
            // 密码键盘
            onInput(key) {
                let that = this;
                that.passwordVal = (that.passwordVal + key).slice(0, 6);
                if (that.passwordVal.length === 6) {
                    let password_pay = that.passwordVal
                    pay({id: this.id, payType: 1, password_pay: password_pay}).then(res => {
                        if (res.code !== 20000) {
                          this.passwordVal = ''
                          Toast.fail({message: res.info, duration: 2000})
                        } else {
                          this.passwordVal = ''
                          this.navClick(this.$route.query.status)
                          this.showPasKey = false;
                        }
                    })
                }
            },
            onDelete() {
                this.passwordVal = this.passwordVal.slice(0, this.passwordVal.length - 1);
            },
            accepter(id) {
                const that = this
                Dialog.confirm({
                  message: '确认收货？',
                }).then(() => {
                    that.accepterOrder(id)
                }).catch(() => {
                })
            },

            see(type, codeArr) {
                if(codeArr.length == 1) {
                    const url = "http://www.kuaidi100.com/chaxun?com=" + type + "&nu=" + codeArr[0]
                    location.href = url
                } else {
                    this.expressArr = []
                    for(var i=0;i<codeArr.length;i++) {
                        const obj = {
                            type,
                            name: '包裹' + (i + 1),
                            code: codeArr[i]
                        }
                        this.expressArr.push(obj)
                    }
                    this.showExpressModel = true
                }
            },
            selectExpress(obj) {
                const url = "http://www.kuaidi100.com/chaxun?com=" + obj.type + "&nu=" + obj.code
                location.href = url
            },

            accepterOrder(id) {
                accepter({id}).then(res => {
                    if (res.code !== 20000) {
                        Toast.fail({message: res.info, duration: 2000})
                    } else {
                        this.navClick(this.$route.query.status)
                    }
                })
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .order
        background #f5f5f5
        min-height 100vh
        .order_header
            width 100%
            overflow hidden
            background #d64532
            padding 0 .3rem 2.4rem .3rem
            height 0
            h1
                width 100%
                overflow hidden
                color #fff
                line-height 0.6rem
                opacity: 0
                font-size .4rem
                text-align center

                .iconfont
                    font-size .4rem
                    float left
            .order_menu
                width 100%
                overflow hidden
                h2
                    width 100%
                    overflow hidden
                    color #fff
                    line-height .6rem
                    font-size .34rem
                p
                    width 100%
                    overflow hidden
                    color #fcb7b2
                    line-height .6rem
                    font-size .28rem
                    span
                        margin-right .3rem
        .order_content
            width 100%
            overflow hidden
            margin-top -.6rem
            padding 0 .3rem
            .order_nav
                width 100%
                overflow hidden
                background #ffffff
                border-radius 4px
                display flex
                flex-wrap wrap
                justify-content space-between
                .order_nav_block
                    flex 1
                    -webkit-flex 1
                    overflow hidden
                    text-align center
                    padding .2rem 0
                    p
                        line-height .6rem
                        font-size .28rem
                        color #000
                .order_nav_active
                    border-bottom 2px solid #d64532
                    p
                        font-weight 600
                        font-size .32rem
            .order_list_block
                width 100%
                overflow hidden
                background #ffffff
                border-radius 4px
                margin-top .3rem
                .block_title
                    width 100%
                    overflow hidden
                    line-height 1.2
                    color #000
                    padding .3rem
                    border-bottom 1px solid #eee
                    span
                        color #d64532
                ul
                    width 100%
                    overflow hidden
                    li
                        padding .3rem .3rem 0 .3rem
                        overflow hidden
                        display flex
                        display -webkit-flex
                        .menu_img
                            width: 1.4rem;
                            height: 1.4rem;
                            margin-right: .3rem;
                            border-radius: 4px;
                            overflow: hidden;
                            img
                                width 100%
                        .menu_infos
                            flex 1
                            -webkit-flex 1
                            overflow hidden
                        h3
                            max-width 3rem
                            overflow hidden
                            line-height .4rem
                            color #000
                            font-size .30rem
                        p
                            max-width 1.2rem
                            overflow hidden
                            line-height .4rem
                            color #9a9a9a
                            font-size .26rem
                            text-align right
                .info_money
                    width 100%
                    overflow hidden
                    padding .3rem
                    p
                        font-size .28rem
                        line-height .5rem
                        color #000
                        text-align right
                        span
                            color: #d64532
                            font-weight 600
                .info_btns
                    width 100%
                    overflow hidden
                    padding .3rem
                    border-top 1px solid #eee
                    button
                        padding  0 .3rem
                        border 1px solid #d64532
                        color: #d64532
                        background #ffffff
                        line-height .6rem
                        height .6rem
                        font-size .28rem
                        border-radius .8rem
                        margin-left .3rem
                    .quxiao
                         color #9a9a9a!important;
                         border 1px solid #eeeeee!important;
                    .comm
                        border 1px solid #d64532
                        background: #d64532
                        color #fff

        .van-card
            background #ffffff
        .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after
            border none

.content_div
    padding .3rem
    height 7rem
</style>
